<template>
	<div class="box">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="1000" circular class="swiper">
			<swiper-item v-for="item in good.category.bannerUrlList" class="item">
				<view class="swiper-item"><image :src="item" mode=""></image></view>
			</swiper-item>
		</swiper>
		<!-- 两行文字 -->
		<view style="text-align: center;color: #333;">{{good.category.name}}</view>
		<view style="text-align: center;color: #333;">{{good.category.frontName}}</view>
		<!-- 底部展示商品的结构 -->
		<view class="bottom">
			<view class="item" v-for="item in good.itemList">
				<image :src="item.listPicUrl" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
	</div>
</template>

<script>
	export default{
		props:['good']
	}
</script>

<style lang="stylus" scoped>
.box
	width 750rpx
	.swiper
		width 750rpx
		height 300rpx
		.item
			width 750rpx
			height 300rpx
			.swiper-item
				width 750rpx
				height 300rpx
				image
					width 750rpx
					height 300rpx
	.bottom
		width 750rpx
		display flex
		flex-wrap wrap
		padding 20rpx
		box-sizing border-box
		.item
			width 50%
			height 436rpx
			image
				width 344rpx
				height 344rpx
			text
				font-size 28rpx
				color #333
				height 92rpx
				display block
				display -webkit-box
				-webkit-box-orient vertical
				-webkit-line-clamp 2
				text-overflow ellipsis
				overflow hidden
</style>
